<html dir="ltr" >
<head>
  <title>GAE-OpenSocial</title>
  <style type="text/css">
<!--

body {
  margin: 5px 15px 0px 15px;
  font-family:arial,sans-serif;
  background-color: #ffffff;
  font-size: 80%;
}

#leftnav {
	position:relative;
	float:left;
	width:100%;
	padding:0 0 0em 1em;
	margin:0;
	list-style:none;
	line-height:0em;
}
.smallfont {
  font-size: 80%;
  padding: 4px;
}

#gaia_loginform {
  margin: 0;
}

a:link, a:active, a:visited {
  color:#0000CC
}

.form-noindent {
  cell-padding:1px;
  background-color: #ffbb77;
  border: #cc6600 1px solid;
}

li {
  margin-bottom: 1em;
}

h1 {
  font-weight: bold;
  font-size: 130%;
}

.header h1 {
  border-bottom: solid 1px #cc6600;
  padding-bottom: 5px;
}

h2 {
  margin: 0 0 0 0;
  font-weight: bold;
  font-size: 120%;
}

.loginBox {
  padding: 0 0 20px;
  margin: 0px;
  text-align: center;
}

.loginBox h2 {
  margin:0 0 0 0;
  font-weight: bold;
  font-size: 120%;
}

.loginBox table {
  margin: 0px auto;
  text-align: left;
}
.loginBox table td {
  padding-bottom: 0.2em;
}

.loginBox .gaia.le.rem {
  font-size: 80%;
}

#alBoxWrap {
  margin-top: 10px;
}

.alBox {
  padding: 5px 10px;
  margin: 0px;
}

.alBox h4 {
  margin: 0px;
  font-size: 80%;
}

.errormsg {
  color: #cc0000
}
.alert {
  color: #FF0000
}
.sites-teaser {
  margin-top: 2em;
  padding: .5em;
  background-color: #ffffee;
  border: 1px solid #eeee00;
}



-->

</style>
<script language="JavaScript" src="/script/prototype.js"></script>

<script language="JavaScript">
<!--
	String.prototype.trim = function() { 
		return this.replace(/^\s+|\s+$/, ''); 
	}

	function loadSysApplication(url) {
		$('application_container').src = url;	
	}

	function loadApplication() {
		app_url= document.getElementById('app_url').value.trim();
		if(!validateURL(app_url)) {
			alert('Please provide a valid url.');
			document.getElementById('app_url').focus();
			return false;
		}
		app_url = '/gadgets/ifr?url=' + app_url;
		loadSysApplication(app_url);
	}

	function validateURL(url) {
		lengthValue = url.length;
		if(lengthValue != 0) {
			var j = new RegExp();
			j.compile("^[A-Za-z]+://[A-Za-z0-9-]+\.[A-Za-z0-9]+");
			if (!j.test(url)) {
				return false;
			}
			return true;
		}
		return false;
	}


	function saveApplication() {
		app_url= document.getElementById('app_url').value.trim();
		if(document.getElementById('title').value.trim() == '') {
			alert('Please provide a valid title.');
			document.getElementById('title').focus();
			return false;
		}
		if(!validateURL(app_url)) {
			alert('Please provide a valid url.');
			document.getElementById('app_url').focus();
			return false;
		}
		app_url = escape('/gadgets/ifr?url=' + app_url);
		param = 'url=' + app_url + '&title=' + document.getElementById('title').value.trim();
		var ajax = new Ajax.Request( '/add', {method: 'get', parameters:param, onComplete: refreshListing });

	}

	function refreshListing (transport) {
		alert('Application is saved successfully.');
		location.href = '/index.html';
	}

//-->
</script>
</head>
<body>
	<div id="main" align="left">
		<table border="0" cellpadding="0" cellspacing="0" width="100%" class="header">
		<tr>
			<td valign="bottom" nowrap>
				<h1>GAE - OpenSocial</h1>
			</td>
		</tr>
		</table>

		<table class="container" border="0" width="90%" cellpadding=1 cellspacing=1>
		<tr>
			<td valign="top" align="left">
				<div style="margin-bottom:20px">
					<table class="form-noindent" cellspacing="0" cellpadding="0" width="100%" border="0" bgcolor="ffbb77">
					<tr>
						<td valign="top" style="text-align:center" nowrap="nowrap" class="smallfont" colspan="2">
							<b>System Applications</b>
						</td>
					</tr>
					<tr>
						<td class="smallfont">
							<ul id="leftnav">
								<li><a href="javascript:loadSysApplication('/gadgets/files/samplecontainer/samplecontainer.html')">Sample Container</a></li>
								<li><a href="javascript:loadSysApplication('/gadgets/ifr?url=http://www.labpixies.com/campaigns/calendar/calendar.xml')">Calendar</a></li>
							</ul>
							
						</td>
					</tr>
					</table>
				</div>
				<div>
					<table class="form-noindent" cellspacing="3" cellpadding="5" width="100%" border="0">
					<tr>
						<td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="ffbb77" class="smallfont">
							<b>User Added Applications</b>
						</td>
					</tr>
					<tr>
						<td class="smallfont">
							<ul id="leftnav">
							{%for userApplication in userApplications %}
							{% if userApplication.title %}
								<li><a href="javascript:loadSysApplication('{{userApplication.url}}')">{{userApplication.title}}</a></li>
							{% endif %}
							{% endfor %}	
							</ul>
						</td>
					</tr>
					</table>
				</div>
			</td>
			<td class="smallfont" valign="top" width="100%" style="padding-left:20px">
				<h2><b>
				You can access applications by clicking on listed applications or you also can provide the application url.
				</b></h2>
				<div style="clear:both;">&nbsp;</div>
				Application URL: <input type="text" name="app_url" id="app_url" size="100"/>
				<div style="clear:both;">like: http://www.google.com, http://google.com</div>
				<div style="clear:both;">&nbsp;</div>
				<div style="clear:both;" />
				Title:<input type="text" name="title" id="title" size="20" maxLength="20"/>
				<input type="button" value="Load Application" onclick="loadApplication();" />
				<input type="button" value="Save Application" onclick="saveApplication();" />
				<div style="clear:both;">&nbsp;</div>
				<iframe id="application_container" width="1000" style="width:1000px;height:500px" style="border:0px"></iframe>
			</td>

		</tr>
		</table>
  <style type="text/css">
  .f {border-top: solid 1px #cc6600; color: #676767;
  font-size: 90%; padding-top: 5px; margin-top:15px}
  .f span {position: relative; bottom: 7px}
  </style>
  <!-- footer -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="f">
  <tr>
  <td valign="bottom" align="center">
  <div style="clear:both;">&nbsp;</div>
  <span>&copy;2008 Impetus Technologies</span>
  </td>
  </tr>
  </table>
</div>
</body>
</html>